<template>
    <div class="uploadbtnbox">
        <el-button @click="router.push({ path: '/upload' })">发布作品</el-button>
        <el-input v-model="sousuotext" placeholder="Please input">
            <template #append>
                <el-button :icon="Search" />
            </template>
        </el-input>
    </div>
    <div class="tabbox">
        <el-table :data="userzplist" style="width: 100%" height="800">
            <el-table-column label="作品" width="450">
                <template #default="scope">
                    <div class="imgwaicengbox">
                        <img :src="item" alt="" v-for="item in scope.row.UploadContent" :key="item">
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="title" label="名称" width="320" />
            <el-table-column prop="classification" label="分类" width="100" :filters="[
                { text: '二次元', value: '二次元' },
                { text: '男士头像', value: '男士头像' },
                { text: '女生头像', value: '女生头像' },
                { text: '背景图片', value: '背景图片' },
            ]" :filter-method="filterHandler" />
            <el-table-column prop="uptime" label="上传时间" width="200" />
            <el-table-column label="操作" width="140" fixed="right">
                <template #default="scope">
                    <el-button size="small" @click="gotoxiangqing(scope.row._id, scope.row.userID)">详情</el-button>
                    <el-button size="small" type="danger" @click="deletemyzuopin(scope.row._id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { yonghuzuopinlist, deletezuopin } from '@/api/Uploadyourwork'
import { useRouter } from 'vue-router'
const router = useRouter();
const userzplist = ref([])
const sousuotext = ref('')
const uploadList = async () => {
    let userID = JSON.parse(localStorage.getItem("user"))._id
    let data = await yonghuzuopinlist(userID)
    const { resultCode, resultInfo } = data
    if (resultCode == 1) {
        userzplist.value = resultInfo
    }
}
const deletemyzuopin = async (_id) => {
    let data = await deletezuopin(_id)
    const { resultCode, resultInfo } = data
    if (resultCode == 1) {
        ElMessage({
            message: '删除成功.',
            type: 'success',
        })
        uploadList()
    } else {
        ElMessage({
            message: '删除失败',
            type: 'warning',
        })
    }
}
// 分类筛选
const filterHandler = (value, row, column) => {
    const property = column['property']
    return row[property] === value
}
//点击查看详情
const gotoxiangqing = (img_id, userID) => {
    localStorage.setItem("XIANG_QING", JSON.stringify({ img_id, userID }))
    router.push({ path: '/workdetails' })
}
onMounted(() => {
    uploadList()
});
</script>
<style lang="scss" scoped>
.uploadbtnbox {
    display: flex;
    margin-bottom: 20px;

    .el-input {
        margin-left: 50px;
        width: 300px;
    }
}

.tabbox {
    margin: 0 auto;
    height: 800px;

    .el-table {
        .imgwaicengbox {
            width: 430px;
            height: 80px;
            overflow: hidden;

            img {
                width: 78px;
                height: 78px;
                margin-right: 5px;
                border: 1px solid #bbb;
                border-radius: 5px;
            }
        }
    }
}
</style>